<template>
	<div class="header" :style="back?{background:'#fff'}:{background:'#f6f6f6'}">
		<div v-if="show" @click="backClick('event')" class="back">
			<img src="../static/img/back.png" />
		</div>
		<div class="title">{{title}}</div>
	</div>
</template>

<script>
	export default {
		props: {
			// todo
			// boolean类型
			show: String,
			title: String,
			back: String
		},

		methods: {
			// 子组件向父组件传参简单案例
			backClick: function(event) {

				history.back()
				this.$emit("backBtn", event)
			}
		}
	}
</script>

<style lang="scss">
	@import '../assets/scss/main.scss';

	.header {
		width: 100%;
		height: px2vw(50);
		background: #fff;
		position: relative;
	}

	.title {
		text-align: center;
		font-size: px2vw(18);
		font-weight: bold;
		line-height: px2vw(50);
	}

	.back {
		position: absolute;
		top: 50%;
		margin-top: -12px;
		left: px2vw(15);
	}

	.back img {
		width: px2vw(10);
		height: px2vws(18);
	}
</style>
